<template>
  <div class="find-car page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}"><!--  :style="{ marginTop: `${phoneStatusBarHeight}`}" -->
  
    <!-- 顶部盒子 -->
    <!-- <van-nav-bar title="寻车信息" fixed placeholder :border="false"> -->
    <!-- 顶部返回按钮 -->
    <!-- <template #left>
        <van-icon name="arrow-left" size="18" @click="goback()" />
      </template> -->
    <!-- 顶部搜索按钮 -->
    <!--  <template #right>
        <img
          src="../../../assets/image/icon_search.png"
          @click="onClickRight()"
          v-show="isActive"
        />
      </template>
    </van-nav-bar> -->
    
    <navbar :title="title"></navbar>
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <!-- 顶部搜索框 -->
      <div class="search-box">
        <form action="/">
          <van-search
            v-model="carModels"
            shape="round"
            placeholder="搜索"
            @cancel="onCancel"
            @search="onSearch"
          />
        </form>
        <!--
            show-action
            v-show="isCancel" -->
      </div>
      <van-tabs
        v-model="activeFindCar"
        color="#008ce8"
        @change="findCarTabChange"
        ref="tabs"
        duration="0"
      >
        <!-- 滚动刷新 -->
        <!-- 一次显示20条，点击加载更多后，再显示20条，全部展示后显示没有跟多了 -->
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
          <!-- 主体区域 -->
          <van-tab title="待生成订单" name="createOrderFindCar" >
            <findCar-info-tab
              :findCarInfoList="findCarInfoList"
            ></findCar-info-tab> 
          </van-tab><!-- :activeTabChange="activeTabChange" -->
          <van-tab title="购车事项审核" name="eventNotificationFindCar">
            <findCar-info-tab
              :findCarInfoList="findCarInfoList"
            ></findCar-info-tab>
          </van-tab>
          <van-tab title="全部" name="allFindCar">
            <findCar-info-tab
              :findCarInfoList="findCarInfoList"
            ></findCar-info-tab>
          </van-tab>
          <!-- 底部显示 -->
          <div v-show="hasMore" class="moretext" @click="moreData">
            点击加载更多
          </div>
          <div v-show="finsh" class="moretext">没有更多了</div>
        <!-- </van-pull-refresh> -->
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { getCarManagementCMyList,getUserInfoMyGetInfoC,getCarManagementC } from "../api";
import findCarInfoTab from "./findCarInfoTab.vue";
export default {
  name: "findCarManagement",
  components: {
    findCarInfoTab,
  },
  data() {
    return {
      // header栏 => 标题
      title:"寻车信息",
      // 顶部搜索按钮的显示状态
      isActive: true,
      // 顶部搜索框的显示状态
      isCancel: false,
      // 下拉刷新状态
      refreshing: false,
      // 点击加载更多的盒子显示
      hasMore: true,
      // 点击加载更多并且没有数据了
      finsh: false,
      // tab 默认显示栏
      activeFindCar: "createOrderFindCar",
      // tab 点击事件
      activeTabChange: "createOrderFindCar",
      // 点击加载更多
      moreNum: 1,
      // 寻车管理列表数据存放
      findCarInfoList: [],
      // 搜索框搜索车型
      carModels: "",

      list: [],
      value: "",
      numListLength:'',
      
      // 获取用户身份 => 普通用户 => 0，管理员 => 1
      userType:'',
      // 获取屏幕状态栏高度
      phoneStatusBarHeight:''
    };
  },
  methods: {
    // 获取寻车管理列表数据
    async initCarManagementCMyList(params) {
      const { data } = await getCarManagementCMyList(params);
      this.numListLength = data.list.length
      if (this.numListLength >= '20') {
        this.hasMore = true
        this.finsh = false
      }else{
        this.hasMore = false 
        this.finsh = true
      }
      this.findCarInfoList.push(...data.list);
      this.findCarInfoList.forEach((item) => {
        if (
          this.activeTabChange == "createOrderFindCar" ||
          this.activeTabChange == "eventNotificationFindCar"
        ) {
            if (this.activeFindCar == "allFindCar") {
              if (item.status == "00") {
              item.findCarStatus = "待生成订单";
            } else if (item.status == "01") {
              item.findCarStatus = "待支付";
            } /* else if (
              item.status == "02" ||
              item.status == "03" ||
              item.status == "04" ||
              item.status == "05"
            ) {
              item.findCarStatus = "已支付";
            } */else if (item.status == "02") {
              item.findCarStatus = "寻车中";
            } else if (item.status == "03") {
              item.findCarStatus = "购车事项通知书审核中";
            }else if (item.status == "04") {
              item.findCarStatus = "购车事项通知书审核通过";
            }else if (item.status == "05") {
              item.findCarStatus = "购车事项通知书审核不通过";
            }else if (item.status == "06") {
              item.findCarStatus = "已完结";
            } else if (item.status == "07") {
              item.findCarStatus = "已取消";
            }
          }
          else{
            item.findCarStatus = "去处理>>";
          }
        } else {
          if (item.status == "00") {
            item.findCarStatus = "待生成订单";
          } else if (item.status == "01") {
            item.findCarStatus = "待支付";
          } /* else if (
            item.status == "02" ||
            item.status == "03" ||
            item.status == "04" ||
            item.status == "05"
          ) {
            item.findCarStatus = "已支付";
          } */if (item.status == "00") {
              item.findCarStatus = "待生成订单";
            } else if (item.status == "01") {
              item.findCarStatus = "待支付";
            } /* else if (
              item.status == "02" ||
              item.status == "03" ||
              item.status == "04" ||
              item.status == "05"
            ) {
              item.findCarStatus = "已支付";
            } */else if (item.status == "02") {
              item.findCarStatus = "寻车中";
            } else if (item.status == "03") {
              item.findCarStatus = "购车事项通知书审核中";
            }else if (item.status == "04") {
              item.findCarStatus = "购车事项通知书审核通过";
            }else if (item.status == "05") {
              item.findCarStatus = "购车事项通知书审核不通过";
            }else if (item.status == "06") {
              item.findCarStatus = "已完结";
            } else if (item.status == "07") {
              item.findCarStatus = "已取消";
            } 
        }
      });
      if ((this.refreshing = true && this.findCarInfoList.length !== 0)) {
        this.refreshing = false;
      }
      // 清除localstarage
      localStorage.removeItem("activeFindCar");
    },
    // 获取寻车管理列表数据
    async initCarManagementC(params) {
      const { data } = await getCarManagementC(params);
      this.numListLength = data.list.length
      if (this.numListLength >= '20') {
        this.hasMore = true
        this.finsh = false
      }else{
        this.hasMore = false 
        this.finsh = true
      }
      this.findCarInfoList.push(...data.list);
      this.findCarInfoList.forEach((item) => {
        if (
          this.activeTabChange == "createOrderFindCar" ||
          this.activeTabChange == "eventNotificationFindCar"
        ) {
            if (this.activeFindCar == "allFindCar") {
              if (item.status == "00") {
              item.findCarStatus = "待生成订单";
            } else if (item.status == "01") {
              item.findCarStatus = "待支付";
            } /* else if (
              item.status == "02" ||
              item.status == "03" ||
              item.status == "04" ||
              item.status == "05"
            ) {
              item.findCarStatus = "已支付";
            } */ if (item.status == "00") {
              item.findCarStatus = "待生成订单";
            } else if (item.status == "01") {
              item.findCarStatus = "待支付";
            } /* else if (
              item.status == "02" ||
              item.status == "03" ||
              item.status == "04" ||
              item.status == "05"
            ) {
              item.findCarStatus = "已支付";
            } */else if (item.status == "02") {
              item.findCarStatus = "寻车中";
            } else if (item.status == "03") {
              item.findCarStatus = "购车事项通知书审核中";
            }else if (item.status == "04") {
              item.findCarStatus = "购车事项通知书审核通过";
            }else if (item.status == "05") {
              item.findCarStatus = "购车事项通知书审核不通过";
            }else if (item.status == "06") {
              item.findCarStatus = "已完结";
            } else if (item.status == "07") {
              item.findCarStatus = "已取消";
            }
          }
          else{
            item.findCarStatus = "去处理>>";
          }
        } else {
          if (item.status == "00") {
            item.findCarStatus = "待生成订单";
          } else if (item.status == "01") {
            item.findCarStatus = "待支付";
          } /* else if (
            item.status == "02" ||
            item.status == "03" ||
            item.status == "04" ||
            item.status == "05"
          ) {
            item.findCarStatus = "已支付";
          }  */if (item.status == "00") {
              item.findCarStatus = "待生成订单";
            } else if (item.status == "01") {
              item.findCarStatus = "待支付";
            } /* else if (
              item.status == "02" ||
              item.status == "03" ||
              item.status == "04" ||
              item.status == "05"
            ) {
              item.findCarStatus = "已支付";
            } */else if (item.status == "02") {
              item.findCarStatus = "寻车中";
            } else if (item.status == "03") {
              item.findCarStatus = "购车事项通知书审核中";
            }else if (item.status == "04") {
              item.findCarStatus = "购车事项通知书审核通过";
            }else if (item.status == "05") {
              item.findCarStatus = "购车事项通知书审核不通过";
            }else if (item.status == "06") {
              item.findCarStatus = "已完结";
            } else if (item.status == "07") {
              item.findCarStatus = "已取消";
            }
        }
      });
      if ((this.refreshing = true && this.findCarInfoList.length !== 0)) {
        this.refreshing = false;
      }
      this.$refs.tabs.resize()
      // 清除localstarage
      localStorage.removeItem("activeFindCar");
    },
    // C端获取用户身份 => 普通用户 => 0，管理员 => 1
    async initUserInfoMyGetInfoC(){
      const {data} = await getUserInfoMyGetInfoC()
      this.userType = data.userType
      console.log('%c [ this.userType ]', 'font-size:13px; background:pink; color:#bf2c9f;', this.userType)
    if (this.activeFindCar == "allFindCar") {
      // if (this.userType == 0) {
      //   this.initCarManagementCMyList({ limit: 20, page: 1 });  
      // }
      // if (this.userType == 1) {
        this.initCarManagementC({ limit: 20, page: 1 })
      // }
    } else if  (this.activeFindCar == "eventNotificationFindCar") {
      // if (this.userType == 0) {
      //   this.initCarManagementCMyList({ limit: 20, page: 1, status: "03" });
      // }
      // if (this.userType == 1) {
        this.initCarManagementC({ limit: 20, page: 1,status: '03' })
      // }
    }else {
      // if (this.userType == 0) {
      //   this.initCarManagementCMyList({ limit: 20, page: 1, status: "00" });
      // }
      // if (this.userType == 1) {
        this.initCarManagementC({ limit: 20, page: 1,status: '00' })
      // }
    }
    },
    // 点击获取更多数据
    moreData() {
      this.moreNum += 1;
      let carModels = this.carModels !== "" ? this.carModels : null;
      let status;
      if (this.activeTabChange == "createOrderFindCar" && this.activeFindCar == "createOrderFindCar") {
        status = "00";
      } else if (this.activeTabChange == "eventNotificationFindCar" || this.activeFindCar == "eventNotificationFindCar") {
        status = "03";
      } else if (this.activeTabChange == "allFindCar" || this.activeFindCar == "allFindCar") {
        status = null;
      }
      let params = {
        limit: 20,
        page: this.moreNum,
        status,
        carModels,
      };
      // if (this.userType == 0) {
      //   this.initCarManagementCMyList(params);  
      // }
      // if (this.userType == 1) {
        this.initCarManagementC(params)
      // }
    },
    // tab 切换触发事件
    findCarTabChange(active) {
      console.log(
        "%c [ active ]",
        "font-size:13px; background:pink; color:#bf2c9f;",
        active
      );
      this.carModels = ''
      this.activeTabChange = active;
      this.findCarInfoList = [];
      let status;
      if (active == "createOrderFindCar") {
        status = "00";
      } else if (active == "eventNotificationFindCar") {
        status = "03";
      } else if (active == "allFindCar") {
        status = null;
      }

      
      // if (this.userType == 0) {
      // this.initCarManagementCMyList({ limit: 20, page: 1, status });
      // }
      // if (this.userType == 1) {
        this.initCarManagementC({ limit: 20, page: 1, status })
      // }
    },
    // 顶部返回按钮点击事件
    goback() {
      this.$router.go(-1);
    },
    // 顶部搜索按钮点击事件
    onClickRight() {
      this.isActive = false;
      this.isCancel = true;
    },
    // 顶部搜索框点击取消触发事件
    onCancel() {
      this.isCancel = false;
      this.isActive = true;
    },
    // 搜索框搜索事件
    onSearch() {
      this.carModels = this.carModels.replace(/^\s+|\s+$/g, "");
      console.log(this.carModels);
      this.findCarInfoList = [];
      // if (this.userType == 0) {
      // this.initCarManagementCMyList({
      //   limit: 20,
      //   page: 1,
      //   condition: this.carModels,
      //   status:
      //     this.activeTabChange == "createOrderFindCar"
      //       ? "00"
      //       : this.activeTabChange == "eventNotificationFindCar"
      //       ? "03"
      //       : null,
      // });
      // }
      // if (this.userType == 1) {
        this.initCarManagementC({ 
          limit: 20, 
          page: 1,
          condition: this.carModels,
          status:
            this.activeTabChange == "createOrderFindCar" && this.activeFindCar == "createOrderFindCar"
              ? "00"
              : this.activeTabChange == "eventNotificationFindCar" || this.activeFindCar == "eventNotificationFindCar"
              ? "03"
              : null,
        })
      // }
      
    },
    // 主体区域下拉刷新触发事件
    onRefresh() {
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.hasMore = false;
      this.carModels = ''
      /* setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        this.hasMore = true;
        if (this.userOrder.length >= 5) {
          this.finished = true;
        }
      }, 1000); */
      this.findCarInfoList = [];
      let params = {
        limit: 20,
        page: 1,
        status:
          this.activeTabChange == "createOrderFindCar" && this.activeFindCar == "createOrderFindCar"
            ? "00"
            : this.activeTabChange == "eventNotificationFindCar" || this.activeFindCar == "eventNotificationFindCar"
            ? "03"
            : null,
      };
      
      // if (this.userType == 0) {
      //   this.initCarManagementCMyList(params);
      // }
      // if (this.userType == 1) {
        this.initCarManagementC(params)
      // }
    },
    // 获取路由链接上拼接的token值
    getTokenInUrl() {
      var url = window.location.href;
      if (url.indexOf("token") > 0) {
        let getTokenParams = window.location.href.split("token=")[1];
        getTokenParams = getTokenParams.split("&")[0];
        if (getTokenParams.length >= 32) {
          getTokenParams = getTokenParams.substr(0, 32);
          console.log(
            "%c [ getTokenParams ]",
            "font-size:13px; background:pink; color:#bf2c9f;",
            getTokenParams
          );
          sessionStorage.setItem("token", getTokenParams);
        }
      }
    }
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F8F8F8");
  },
  created() {
    // 获取屏幕状态栏高度
    this.phoneStatusBarHeight = window.phoneStatusBarHeight
    // 修改页面标题
    document.title = "寻车信息";
    // 获取路由链接上拼接的token值
    this.getTokenInUrl();
    // 获取localstarage
    // this.activeFindCar = localStorage.getItem("activeFindCar");
    
    this.activeFindCar = this.$route.query.activeFindCar !== '' ? this.$route.query.activeFindCar : 'createOrderFindCar'
    

    // C端获取用户身份 => 普通用户 => 0，管理员 => 1
    this.initUserInfoMyGetInfoC()
    this.$nextTick(()=>{
      let myHeight = `100vh - ${this.phoneStatusBarHeight}`
      document.querySelector('.van-pull-refresh').style.height = '78vh'
      this.$refs.tabs.resize()
      console.log(this.$refs.tabs.resize)
    })
  },
  destroyed() {
    // 清除localstarage
    localStorage.removeItem("activeFindCar");
  },
};
</script>

<style scoped lang="less">
// .find-car{
//   height: 90vh;
// }
.van-pull-refresh {
  height: 100vh;
  overflow: scroll;
}
.moretext {
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 12px;
  color: #999999;
  text-align: center;
  margin: 10px 0;
  letter-spacing: 1px;
}

.find-car-item-recode {
  padding: 0;
  // background-color: white;
  width: 100vw;
}
.find-car-item {
  margin-top: 8px;
  // padding: 0 16px;
}
</style>
<style lang="less">
.van-nav-bar .van-icon {
  color: #000000 !important;
}
.van-nav-bar__title {
  font-size: 17px !important;
  font-family: PingFangSC-Semibold, PingFang SC !important;
  font-weight: 600 !important;
  color: #000000 !important;
}
</style>
